<template>
  <div class="dashboard-container">
    <div class="dashboard-data">
      <div class="data-point">
        <div class="point-area">
          <div class="area-img" style="background-color: #67C23A;">
            <img width="70" src="@/assets/img/data.png" />
          </div>
          <div class="area-data">
            <div style="text-align: center;font-size:35px;">51515</div>
            <div style="text-align: center;font-size:20px;">总供能数据</div>
          </div>
        </div>
        <div class="point-area">
          <div class="area-img" style="background-color: #E6A23C;">
            <img width="70" src="@/assets/img/area.png" />
          </div>
          <div class="area-data">
            <div style="text-align: center;font-size:35px;">12000㎡</div>
            <div style="text-align: center;font-size:20px;">总供能面积</div>
          </div>
        </div>
        <div class="point-area">
          <div class="area-img" style="background-color: #909399;">
            <img width="70" src="@/assets/img/user.png" />
          </div>
          <div class="area-data">
            <div style="text-align: center;font-size:35px;">1200</div>
            <div style="text-align: center;font-size:20px;">接入用户总数</div>
          </div>
        </div>
        <div class="point-area">
          <div class="area-img" style="background-color: #F56C6C;">
            <img width="70" src="@/assets/img/percent.png" />
          </div>
          <div class="area-data">
            <div style="text-align: center;font-size:35px;">75%</div>
            <div style="text-align: center;font-size:20px;">可再生能源百分比</div>
          </div>
        </div>
        <div class="chart-fuhe">
          <div class="chart-title"><div class="el-icon-caret-right"></div>
          负荷
          </div>
          <div class="chart-content"><line-chart /></div>
          
        </div>
      </div>
      <div class="map">
        <map-chart />
      </div>
    </div>
    <div class="dashboard-chart">
      <div class="dashboard-echart">
        <div class="chart-title"><div class="el-icon-caret-right"></div>
          实时能耗-水
          </div>
          <div class="chart-content"><line-chart /></div>
      </div>
      <div class="dashboard-echart">
        <div class="chart-title"><div class="el-icon-caret-right"></div>
          实时能耗-电
          </div>
          <div class="chart-content"><line-chart /></div>
      </div>
      <div class="dashboard-echart">
        <div class="chart-title"><div class="el-icon-caret-right"></div>
          实时能耗-气
          </div>
          <div class="chart-content"><line-chart /></div>
      </div>
      <div class="dashboard-echart">
        <div class="chart-title"><div class="el-icon-caret-right"></div>
          实时能耗-市政热
          </div>
          <div class="chart-content"><line-chart /></div>
      </div>
    </div>
  </div>
</template>

<script>
import PieChart from "./components/PieChart";
import MapChart from "./components/MapChart";
import BarChart from "./components/BarChart";
import LineChart from "./components/LineChart";
export default {
  name: "SystemSummary",
  components: {
    PieChart,
    MapChart,
    BarChart,
    LineChart
  }
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  margin: 20px;
  height: calc(100vh - 90px);
  .dashboard-data {
    width: 100%;
    height: 65%;
    display: flex;
    .data-point {
      width: 50%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-content: flex-start;
      .point-area {
        width: 50%;
        height: 25%;
        padding: 5px;
        color: #666;
        background: #fff;
        border-style: solid;
        border-color: black;
        border-width: 3px;
        box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
        border-color: rgba(0, 0, 0, 0.05);
        display: flex;
        .area-img {
          width: 40%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .area-data {
          width: 60%;
          height: 100%;
        }
      }
      .chart-fuhe{
        height: 50%;
        width: 100%;
         color: #666;
        background: #fff;
        border-style: solid;
        border-color: black;
        border-width: 3px;
        box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
        border-color: rgba(0, 0, 0, 0.05);
      }
    }
    .map {
      width: 50%;
      height: 98%;
      margin-left: 1%;
      margin-bottom: 1%;
      color: #666;
      background: #fff;
      border-style: solid;
      border-color: black;
      border-width: 3px;
      box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
      border-color: rgba(0, 0, 0, 0.05);
    }
  }
  .dashboard-chart {
    display: flex;
    justify-content: space-between;
    height: 35%;
  }
  .dashboard-echart {
    width: 24%;
    height: 100%;
    padding: 10px;
    color: #666;
    background: #fff;
    border-style: solid;
    border-color: black;
    border-width: 3px;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);
  }
  .chart-title{
    height: 25px;
    line-height: 25px;
    font-size: 18px;
    border-bottom: 1px #efefef solid;

  }
  .chart-content{
    height: calc(100% - 25px);
  }
}
</style>
